<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

	<script type="text/javascript" src="../libs/three.js"></script>
	<script type="text/javascript" src="../libs/helvetiker_regular.typeface.js"></script> 
	<style >
		body{
			/* set margin to 0 and overflow to hidden, to use the complete page */

			margin: 0;
			overflow: hidden;
		}
	</style>
</head>
<body onload="init()">
    <div id="mainCanvas"></div>
</body> 

<script>
	
	function init() {
		//counters
		var i,j,k;

		//to save all cubes by position
		var cubes = [];

		var raycaster = new THREE.Raycaster();	
		var mouse = new THREE.Vector2();
		var INTERSECTED;

		var count = 0;  // counter
		var x=0, y=0 ,z=0;  //rotate direct
    	var renderer = new THREE.WebGLRenderer();
		renderer.setClearColor(0xEEEEEE, 1.0);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.shadowMapEnabled = true;

		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.set(4, 3, 6);
		camera.lookAt(new THREE.Vector3(0, 0, 0));
		document.getElementById("mainCanvas").appendChild(renderer.domElement);

		window.addEventListener( 'resize', onWindowResize, false );
		//add material
		var materials = [];
		for (var i = 0; i < 6; ++i) {
		    materials.push(new THREE.MeshBasicMaterial({
		        map: THREE.ImageUtils.loadTexture('./image/' + i + '.png', {}, function() {
		        	renderer.render(scene, camera);
		        })
		    }));
		}

		//mesh
		var cubeGeometry = new THREE.CubeGeometry(1, 1, 1);
		var faceMaterial = new THREE.MeshFaceMaterial(materials);
		//init magic box
		for(i = 0; i < 2; i++){
			for(j = 0; j < 2; j++){
				for(k = 0; k < 2; k++){
					var cube = new THREE.Mesh(cubeGeometry, faceMaterial);
					cube.position.set(-0.5 + i, -0.5 + j, -0.5 + k);
					cubes[i*4 + j* 2 + k] = cube;
					scene.add(cube);
				}
			}
		}

		//pivot
		var pivot = new THREE.Object3D();
		scene.add(pivot);

		render();

		function render(){

			raycaster.setFromCamera(mouse, camera);

			var intersects = raycaster.intersectObjects(cubes);

			if(INTERSECTED){
				INTERSECTED.material.transparent = false;
				INTERSECTED.material.opacity = 1;
			}
			INTERSECTED = null;

			if(intersects.length > 0){
				INTERSECTED = intersects[0].object;
			}

			requestAnimationFrame(render);
 			renderer.render(scene, camera);
		}

    	function animate() {
		    var id = requestAnimationFrame(animate);
		    
		    pivot.rotation.x += x * Math.PI/30;
		    pivot.rotation.y += y * Math.PI/30;
		    pivot.rotation.z += z * Math.PI/30;
		    renderer.render(scene, camera);
		    count = count + 1;
		    if(count >= 15){
		    	console.log(x, y ,z);
		    	restart();
		    	cancelAnimationFrame(id);
		    }
		}



		window.onclick = function(e) {  
			if(count > 0 ){
				return false;
			}

			if(INTERSECTED){

			}


			
			animate();
			
		}

		var getMousePosition = function(e) {
			e = e || window.event;
		    var Ax = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
		    var Ay= e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
		    return {'x':Ax, 'y':Ay};
		}

		var restart = function(){
			count = 0;
			x = 0;
			y = 0;
			z = 0;
			// for(var cube in pivot.children){
			// 	pivot.remove(cube);
			// }
		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		window.onmousemove = function onDocumentMouseMove( event ) {

			event.preventDefault();

			mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
			mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

		}

	} 

</script>

<html>